import {useCallback, useEffect, useRef, useState} from "react";
import {observer} from "mobx-react";
import {Map, MapProps, View} from "@tarojs/components";
import Taro from '@tarojs/taro';
import {URL} from "@/config/request";
import {Stall} from "@/components/stall";
import {LocationStore} from "@/store";
import {DataAssemble} from "@/utils/data-assemble";
import {uniqueId} from "lodash";
import {mockStartCoord} from "./mock";
import BottomArea from "./components/bottom-area";
import styles from "./index.module.scss";

function App() {
  const {longitude, latitude} = LocationStore;
  const currentRegion = useRef<ICoord>({longitude, latitude});
  const [markerCardShow, setMarkerCardShow] = useState(false);
  const [dots, setDots] = useState([]);

  const data: MapProps.polygon = {
    dashArray: [5, 5],
    strokeColor: '#007AFF',
    strokeWidth: 1,
    points: [
      {longitude: 104.03412, latitude: 30.556005},
      {longitude: 104.034092, latitude: 30.555823},
      {longitude: 104.034315, latitude: 30.55583},
      {longitude: 104.034317, latitude: 30.55599},
    ]
  };

  useEffect(() => {
    // // 获取code 换取登录信息
    // Taro.login({
    //   success(res){
    //     if(res.code){
    //       console.log(res.code);
    //     }
    //   }
    // });
    // 获取定位坐标
    Taro.getLocation({
      async success() {
        const listRes = await Taro.request({
          url: URL + '/GetBooth',
          method: 'POST',
          data: {
            pageIndex: 1,
            pageSize: 99,
          }
        });
        setDots(listRes.data.data.data.map(item => {
          const [lng, lat] = (item.boothLocation as string).split(',');
          return DataAssemble({
            id: +uniqueId(),
            longitude: lng,
            latitude: lat
          });
        }));
      }
    });
    setTimeout(() => {
      currentRegion.current = mockStartCoord;
      LocationStore.setLocation(mockStartCoord);
    }, 100);
  }, []);

  useEffect(() => {
    currentRegion.current = {latitude, longitude};
    LocationStore.setLocation({latitude, longitude});
  }, [latitude, longitude]);

  function backToCenter() {
    if (mockStartCoord.latitude === currentRegion.current.latitude && mockStartCoord.longitude === currentRegion.current.longitude) return;
    LocationStore.setLocation(currentRegion.current);
    setTimeout(() => {
      currentRegion.current = mockStartCoord;
      LocationStore.setLocation(mockStartCoord);
    });
  }

  function onRegionChange(e) {
    currentRegion.current = e.detail;
  }

  const onMarkerTap = useCallback(() => {
    setMarkerCardShow(true);
  }, []);

  const onMapTap = useCallback(() => {
    setMarkerCardShow(false);
  }, []);

  function onError() {
  }

  return (
    <View
      className={styles.wrapper}
    >
      <Map
        latitude={latitude}
        longitude={longitude}
        onRegionChange={onRegionChange}
        onError={onError}
        scale={20}
        polygons={[data]}
        markers={dots}
        onMarkerTap={onMarkerTap}
        onTap={onMapTap}
        maxScale={30}
      />
      <Stall className={styles.stallCard} style={{display: markerCardShow ? 'flex' : 'none'}} />
      <BottomArea hide={markerCardShow} dots={dots} onBackToView={backToCenter} />
    </View>
  );
}

export default observer(App);
